<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('统计每日用户新增列表')"/>
    <style type="text/css">
        .top-block {
            width: 200px;
            height: 150px;
            background: grey;
        }

        h2 {
            font-weight: bold;
        }

        .count_img {
            height: 100%;
            width: 100%;
            /*margin-left: 50px;*/
        }

        .count_num {
            /*top: 90px;*/
            /*right: 50px;*/
            font-size: 60px;
        }

        .count_num_top, .count_num_bottom {
            width: 100%;
            font-size: 25px;
        }

        .count_num_top {
            /*top: 80px;*/
            /*right: 50px;*/
        }


        .count_num_bottom {

        }

        .count_num_top span, .count_num_bottom span {
            /*position: absolute;*/
            /*right: 0;*/
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12" style="margin-top: 20px">
        <div class="col-sm-2">
            <div class="ibox-title">
                <h2>总设备数</h2>
            </div>
            <div class="ibox-content">
                <!--                     <div style="height: 100px;width: 100px">-->
                <!--                         <img class="count_img" th:src="@{/img/user_num_blue.png}">-->
                <!--                     </div>-->
                <p class="count_num">[[${allNum}]]</p>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="ibox-title">
                <h2>设备种类分布</h2>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-sbzl-chart"></div>
            </div>

        </div>

        <div class="col-sm-5">
            <div class="ibox-title">
                <h2>设备状态显示</h2>
            </div>
            <div class="ibox-content">
                <p class="count_num_top">
                    <button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i></button>
                    <span style="padding-left: 50px; padding-right: 50px;">
                         <button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i></button></span>
                    <button class="btn btn-danger dim" type="button"><i class="fa fa-fire"></i>
                    </button>
                    <span style="padding-left: 50px;"><button class="btn btn-info  dim" type="button"><i
                            class="fa fa-close"></i>
                     </button></span></p>
                <p class="count_num_top">正常<span style="padding-left: 50px; padding-right: 50px;">预警</span>异常<span
                        style="padding-left: 50px;">离线</span></p>
                <p class="count_num_top">[[${xjjqrNum}]]<span style="padding-left: 70px; padding-right: 80px;">[[${cyjcNum}]]</span>[[${dmjqrNum}]]<span
                        style="padding-left: 80px;">[[${jxbNum}]]</span></p>
            </div>
        </div>
        <div class="col-sm-12" style="margin-top: 10px">
            <div class="ibox-title">
                <h5 class="col-sm-1">设备运行时间</h5>
                <form id="dateForm">
                    <div class="form-group col-sm-9" style="margin-top: -10px;height: 0;">
                        <div class="input-daterange input-group" style="width: 60%">
                            <span class="input-group-addon">日期范围选择：</span>
                            <input type="text" class="input-sm form-control" name="startTime" th:value="${startTime}"
                                   id="startTime" placeholder="yyyy-MM-dd"/>
                            <span class="input-group-addon">到</span>
                            <input type="text" class="input-sm form-control" name="enfTime" id="endTime"
                                   th:value="${endTime}" placeholder="yyyy-MM-dd"/>
                        </div>
                        <button type="button" class="btn btn-primary"
                                style="position: absolute;top: -1px;left: 60%;outline: none" onclick="search()">查询
                        </button>
                        <button type="button" class="btn btn-primary"
                                style="position: absolute;top: -1px;left: 66.3%;outline: none" onclick="reset()">重置
                        </button>
                    </div>
                </form>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-line-chart"></div>
            </div>
        </div>
    </div>

    <div class="col-sm-12" style="margin-top:10px;">
        <div class="col-sm-5">
            <div class="ibox-title">
                <h2>设备种类分布（柱状图）</h2>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-sbzlzhu-chart"></div>
            </div>

        </div>

        <div class="col-sm-5">
            <div class="ibox-title">
                <h2>设备状态显示</h2>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="bingtu"></div>
            </div>
        </div>

    </div>


    <div class="col-sm-12" style="margin-top:10px;">
        <div class="col-sm-5">
            <div class="ibox-title">
                <h2>设备状态趋势统计</h2>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="qst"></div>
            </div>

        </div>

<!--        <div class="col-sm-5">-->
<!--            <div class="ibox-title">-->
<!--                <h2>设备状态显示</h2>-->
<!--            </div>-->
<!--            <div class="ibox-content">-->
<!--                <div class="echarts" id="bingtu"></div>-->
<!--            </div>-->
<!--        </div>-->

    </div>

</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var typeArray = ['机器1', '机器2'];
    var h5Array = h5Array1 = [[${jq1Array}]];
    var pcArray = pcArray1 = [[${jq2Array}]];
    var dateArray = dateArray1 = [[${dateArray}]];

    $(function () {
        initeEcharts(typeArray, h5Array, pcArray, dateArray);
        search();
        echarts_sbzl();
        echart_sbzlzhu();
        bingtu();
        qst();
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var startDate = laydate.render({
                elem: '#startTime',
                max: $('#endTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function (value, date) {
                    // 结束时间大于开始时间
                    if (value !== '') {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });
            var endDate = laydate.render({
                elem: '#endTime',
                min: $('#startTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function (value, date) {
                    // 开始时间小于结束时间
                    if (value !== '') {
                        startDate.config.max.year = date.year;
                        startDate.config.max.month = date.month - 1;
                        startDate.config.max.date = date.date;
                    } else {
                        startDate.config.max.year = '';
                        startDate.config.max.month = '';
                        startDate.config.max.date = '';
                    }
                }
            });
        });
    });

    function initeEcharts(typeArray, h5Array, pcArray, dateArray) {
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            title: {
                text: '设备运行时间'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: typeArray
            },
            grid: {
                x: 40,
                x2: 40,
                y2: 24
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: dateArray
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // axisLabel : {
                    //     formatter: '{value} °C'
                    // }
                }
            ],
            "color": ['#5292ff', '#33d0bd', '#ffc372', '#fe706e', "#7585e5", "#88ca8c"],
            series: [
                {
                    name: typeArray[0],
                    type: 'line',
                    data: h5Array,
                    color: '#D94216',
                    // markPoint: {
                    //     data: [
                    //         {type: 'max', name: '最大值'}
                    //     ]
                    // },
                    // markLine: {
                    //     data: [
                    //         {type: 'average', name: '平均值'}
                    //     ]
                    // }
                },
                {
                    name: typeArray[1],
                    type: 'line',
                    data: pcArray,
                    color: '#1C84C6',
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);
    }

    function echarts_sbzl() {
        var shzlChart = echarts.init(document.getElementById("echarts-sbzl-chart"));
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            "color": ['#5292ff', '#33d0bd', '#ffc372', '#fe706e', "#7585e5", "#88ca8c"],
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 10, name: '打磨机器人'},
                        {value: 50, name: '机械臂'},
                        {value: 20, name: '巡检机器人'},
                        {value: 15, name: '冲压机床'},
                        {value: 5, name: '数控机床'}
                    ]
                }
            ]
        };
        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }


    function echart_sbzlzhu() {
        var shzlChart = echarts.init(document.getElementById("echarts-sbzlzhu-chart"));
        var option = {
            xAxis: {
                type: 'category',
                data: ['打磨机器人', '机械臂', '巡检机器人', '冲压机床', '数控机床']
            },
            yAxis: {
                type: 'value'
            },
            "color": ['#5292ff', '#33d0bd', '#ffc372', '#fe706e', "#7585e5", "#88ca8c"],
            series: [
                {
                    data: [80, 1, 9, 5, 5,],
                    type: 'bar',
                    barWidth: '25px',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }

    function bingtu() {
        var shzlChart = echarts.init(document.getElementById("bingtu"));
        var option = {
            title: {
               // text: '',
                //subtext: 'F',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            "color": ['#5292ff', '#33d0bd', '#ffc372', '#fe706e', "#7585e5", "#88ca8c"],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}:{c}({d}%)'
                        }
                    },
                    radius: '30%',
                    data: [
                        {value: 10, name: '打磨机器人'},
                        {value: 10, name: '机械臂'},
                        {value: 50, name: '巡检机器人'},
                        {value: 8, name: '冲压机床'},
                        {value: 22, name: '数控机床'},

                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }

    function qst(){
        var shzlChart = echarts.init(document.getElementById("qst"));
        let xAxisData = [];
        let data1 = [];
        let data2 = [];
        let data3 = [];
        let data4 = [];
        let data5 = [];
        let name =['打磨机器人','机械臂','巡检机器人','冲压机床','数控机床']
        for (let i = 0; i < 5; i++) {
            xAxisData.push(name[i]);
            data1.push(+(  0));
            data2.push(+ (0 ));
            data3.push(+( 0));
            data4.push(+(  0));

        }
        var emphasisStyle = {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
            }
        };
       var option = {
            legend: {
                data: ['正常', '异常', '预警', '冲压机床', '离线'],
                left: '10%'
            },
            // brush: {
            //     toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
            //     xAxisIndex: 0
            // },
            toolbox: {
                feature: {
                    magicType: {
                        type: ['stack']
                    },
                    dataView: {}
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                name: '',
                axisLine: { onZero: true },
                splitLine: { show: false },
                splitArea: { show: false }
            },
            yAxis: {},
            grid: {
                bottom: 100
            },
           "color": ['#5292ff', '#33d0bd', '#ffc372', '#fe706e', "#7585e5", "#88ca8c"],
            series: [
                {
                    name: '正常',
                    type: 'bar',
                    barWidth: '25px',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data1
                },
                {
                    name: '异常',
                    type: 'bar',
                    barWidth: '25px',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data2
                },
                {
                    name: '预警',
                    type: 'bar',
                    barWidth: '25px',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data3
                },
                {
                    name: '离线',
                    type: 'bar',
                    barWidth: '25px',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data4
                }
            ]
        };

        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }

    function search() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        if (!startTime || !endTime) {
            $.modal.alert("请选择开始日期和结束日期");
            return;
        }
        $.modal.loading("加载中，请耐心等待！");
        $.ajax({
            type: "GET",
            url: ctx + "gy/statistics/deviceRun",
            data: {
                startTime: $("#startTime").val(),
                endTime: $("#endTime").val()
            },
            dataType: "json",
            success: function (data) {
                h5Array = data.jq1Array;
                pcArray = data.jq2Array;
                dateArray = data.dateArray;
                initeEcharts(typeArray, h5Array, pcArray, dateArray);
                $.modal.closeLoading();
            },
            error: {}
        });
        initeEcharts(typeArray, h5Array, pcArray, dateArray);
    }

    function reset() {
        $.form.reset("dateForm");
        initeEcharts(typeArray, h5Array1, pcArray1, dateArray1);
    }
</script>
</body>
</html>
